<template>
  <div class="wrapper">
    <mt-header fixed title="融资融券交易⻛险揭示书">
      <router-link to="/buy" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <!-- <iframe class="iframe" :src="agreeUrl" frameborder="0"></iframe> -->
    <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>

  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import * as api from '@/axios/api'
import PDFJS from 'pdfjs-dist'

// const Base64 = require('js-base64').Base64

export default {
  data () {
    return {
      agreeUrl: '', // 注册协议地址
      pdfDoc: null,
      pages: 0
    }
  },
  mounted: function () {
    this.getInfoSite()
  },
  methods: {
    async getInfoSite () {
      // 获取 logo
      let data = await api.getInfoSite()
      if (data.status === 0) {
        this.logo = data.data.siteLogoSm
        this.agreeUrl = data.data.tradeAgree
        this._loadFile(this.agreeUrl)
      } else {
        Toast(data.msg)
      }
    },
    _renderPage (num) {
      this.pdfDoc.getPage(num).then((page) => {
        let canvas = document.getElementById('the-canvas' + num)
        let ctx = canvas.getContext('2d')
        let dpr = window.devicePixelRatio || 1
        let bsr = ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio || 1
        let ratio = dpr / bsr
        let viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
        canvas.width = viewport.width * ratio
        canvas.height = viewport.height * ratio
        canvas.style.width = viewport.width + 'px'
        canvas.style.height = viewport.height + 'px'
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport
        }
        page.render(renderContext)
        if (this.pages > num) {
          this._renderPage(num + 1)
        }
      })
    },
    _loadFile (url) {
      PDFJS.getDocument(url).then((pdf) => {
        this.pdfDoc = pdf
        this.pages = this.pdfDoc.numPages
        this.$nextTick(() => {
          this._renderPage(1)
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
  body {
    background-color: #fff;
  }

  .wrapper {
    height: 100%;
    padding-bottom: 0;
  }

  .iframe {
    width: 100%;
    height: 100%;
    min-height: 16rem;
  }

  .mint-field .mint-cell-value {
    padding-left: 0;
  }

  .mint-popup-box {
    // width: 100%;
    // height: 100%;
    // background:#fff;
    .title {
      font-size: 0.43rem;
      margin-bottom: 0.34rem;
      // margin-top: 1.40rem;
      padding: 0.1rem 0.4rem;
      color: #333;
    }

    .mint-cell {
      background: none;
      color: #000;
    }

    /deep/ .mint-cell-text {
      color: #000;
    }

    .mint-cell-wrapper {
      border: 0.02rem solid #ddd;
    }

    .mint-button {
      margin-top: 0.2rem;
      width: 60%;
    }

    .check-box {
      .text-center {
        padding-top: 0.2rem;
      }

      p {
        padding: 0.2rem 0.4rem;
      }

    }
  }

  .check-box-wrap {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    .check-box {
      width: 60%;
      height: 2rem;
      background: #fff;
      position: absolute;
      top: 20%;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 0.2rem;
      padding: 0.2rem;

      .mint-cell {
        background: none;
      }
    }
  }

  .text-center {
    padding: 0.52rem;
  }

  img.banenr {
    width: 60%;
    width: 36%;
    height: auto;
  }

  .forms {
    // width: 92%;
    margin: 0.3rem 0;
    // height: 110px;
    // float: left;
    border-radius: 8px;
    // background: #ffffff;
    /* box-shadow: 1px 1px 10px #cfcfcf; */
  }

  .form-view {
    width: 90%;
    // height: 41px;
    height: 1rem;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0.14rem;

    .iconfont {
      padding: 0.3rem;
      vertical-align: middle;
      position: absolute;
      font-size: 0.4rem;
    }

    .icon-lr_password {
      font-size: 0.5rem;
    }

    .icon-tuijian {
      font-size: 0.5rem;
    }
  }

  .form-view:first-child {
    margin-top: 12px;
  }

  .form-view input {
    display: block;
    width: 100%;
    // height: 40px;
    height: 1rem;
    /* margin: 0 auto; */
    // font-size: 13px;
    border: none;
    border-radius: 0;
    line-height: 40px;
    text-indent: 1.2rem;
    border-bottom: 0.028rem solid #676b6f;

    &:focus {
      border: 0 solid #ccc !important;
      border-radius: 0.695rem;
      box-shadow: 0 0 0.28rem #676b6f;
      border-bottom: none;
    }
  }

  .form-ic {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 5px;
  }

  .getcode {
    position: absolute;
    right: 0.2rem;
    line-height: 0.9rem;
    color: #d50000;
    border-radius: 10px;
    padding: 0 0.2rem;
    top: 0.05rem;
  }

  .chebox {
    width: 90%;
    float: left;
    padding-left: 1%;
  }

  .checked {
    position: relative;
    display: block;
    /* float: left; */
    margin: 0 auto;
    font-size: 0.25rem;
    padding-left: 22px;
  }

  input[type='checkbox'] {
    display: none;
  }

  label {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 10px;
    border: 1px solid #ff9600;
    background: white;
  }

  input[type='checkbox']:checked + label:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 3px;
    width: 3px;
    height: 8px;
    border: solid #ff9600;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .btnbox {
    /* float: left; */
    width: 100%;
  }

  .btnok {
    display: block;
    width: 85%;
    height: 0.92rem;
    margin: 30px auto 0 auto;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    border-radius: 0.46rem;
    background: #d50000;
  }

  .aggre {
    color: #ff7e00;
  }

  .back {
    font-size: 0.25rem;
    margin-top: 0.3rem;
    text-align: center;
    color: #666;
  }

  .back a {
    border-bottom: 1px solid #888;
    padding-bottom: 0.06rem;

  }
</style>
